<template>
	<view class="wrap">
		<u--form :model="form" ref="uForm" :rules="rules" labelPosition="left" labelWidth="80">
			<u-form-item label="帐号:"  prop="mobile" borderBottom>
			    <u-input v-model="form.mobile" :clearable="true" :focus="true" placeholder="请输入手机号" border="none"/>
			</u-form-item>
			<u-form-item label="密码:"  prop="password" borderBottom>
			    <u-input v-model="form.password" :password="true" placeholder="请输入密码" border="none"/>
			</u-form-item>
			<u-form-item label="验证码:"  prop="code" borderBottom>
			    <u-input v-model="form.code" placeholder="请输入验证码" border="none"/>
					<view slot="right" class="codeWrap"  @click="refreshCode">
						<mp-html class="code" :content="svg"></mp-html>
						<text class="change">换一张</text>
					</view>
				</u-input>
			</u-form-item>
		</u--form>
		<u-button text="登录" type="success" @click="submit"></u-button>
		<view class="backLogin">
			<text class="backLogin_btn" @click="backLogin">返回登录页</text>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	import {v4 as uuidv4} from 'uuid'
	export default {
	data(){
		return{
			form:{
				mobile:'',
				password:'',
				code:''
			},
			svg:'',
			rules:{
				mobile:[
					{
						required: true,
						message: '请输入手机号码',
						trigger: ['blur', 'change'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
				],
				password:[
					{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change'],
					},
					{
						min:6,
						message:'密码的长度至少6位',
						trigger:['blur','change']
					}
				],
				code:[
					{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change'],
					},
					{
						len:4,
						message:'验证码长度4位',
						trigger:['blur','change']
					}
				]
			}
		}
		},
		computed:{
			sid(){
				return this.$store.state.auth.sid
			}
		},
		mounted(){
			if (!this.sid) {
				this.$store.commit('setSid',uuidv4())
			}
			this.getCaptcha()
		},
		methods:{
			async getCaptcha () {
				const {code,data} = await this.$axios.api.getCaptcha({sid:this.sid})
				if(code===200){	
					this.svg = data
				}
			},
			refreshCode(){
				this.getCaptcha()
			},
			...mapMutations(['setUserInfo','setToken','setRefreshToken']),
			submit(){
				this.$refs.uForm.validate().then(async res => {
					const {code,data,token,refreshToken} = await this.$axios.api.appPhoneLogin({
						mobile: this.form.mobile,
						password: this.form.password,
						code: this.form.code,
						sid: this.sid
					})
					if(code===200){
						this.setUserInfo(data),
						this.setToken(token),
						this.setRefreshToken(refreshToken)
						uni.showToast({
							title:'登录成功!',
							icon:'none',
							duration:2000
						})
						uni.navigateBack({
							delta: 1
						})
					}else if(code === 401){
						uni.showToast({
							title:'验证码错误',
							icon:'error',
							duration:2000
						})
					}else if(code === 404){
						uni.showToast({
							title:'帐号或密码错误',
							icon:'error',
							duration:2000
						})
					}
				})
			},
			backLogin(){
				// #ifdef H5
				this.$emit('closeAccounts',false)
				// #endif
				
				// #ifdef APP-PLUS
				this.$emit('loginAccountsStatus',false)
				// #endif 
			}
		}
	}
</script>

<style lang="scss">
.wrap{
	width: 100%;
	min-height: 500rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	.codeWrap{
		display: flex;
		flex-direction: column;
		align-items: center;
		.code{
			width: 180rpx;
			line-height: 60rpx;
			z-index: 99999999;
		}
		.change{
			color: $u-success;
		}
	}
	.backLogin{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		&_btn{
			width: 140rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 26rpx;
			color: #007AFF;
			font-weight: bold;
		}
	}
}
</style>
